<script setup lang="ts">
import { APP_TITLE } from '../../utils'

const cls = 'ui-layout-logo'
</script>

<template>
  <RouterLink :class="cls" to="/">
    <ElMenuItem index="/">
      <ElIcon>
        <img :class="`${cls}_logo`" src="../../assets/logo-w-48.png">
      </ElIcon>
      <template #title>
        <span :class="`${cls}_title`">{{ APP_TITLE }}</span>
      </template>
    </ElMenuItem>
  </RouterLink>
</template>

<style lang="scss">
.ui-layout-logo {
  .el-menu-item {
    &:hover {
      background-color: transparent
    }
    &.is-active {
      color: var(--el-menu-text-color);
    }
  }
  &_logo {
    width: 30px;
  }
  &_title {
    font-weight: bold;
    font-size: 17px;
    margin-left: 5px;
  }
}
</style>
